<template>
  <x-drawer :visible.sync="serviceVisible" background="none" @cancel="closeCouponVisible">
    <view class="p-drawer">
      <view class="_header">
        <text class="_title">服务信息</text>
        <view class="icon" @click="closeCouponVisible">
          <x-icon name="icon-025" size="28" color="#C8C9CC"></x-icon>
        </view>
      </view>
      <scroll-view class="_scroll" scroll-y="true">
        <view class="_content">
          <view class="_list" v-for="(item,index) in list" :key="index">
            <view class="_title">{{ item.dictNote }}</view>
            <view class="_text">{{ item.remark }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';
import XIcon from '@/components/x-icon';

export default {
  name: 'PDrawerService',
  components: {
    XDrawer,
    XIcon
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    serveList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      serviceVisible: this.visible,
      serveListArray: []
    };
  },
  computed: {
    list() {
      const specificValue = '运费险';
      if (this.serveList && this.serveList.length) {
        const list = this.serveList;
        return list.sort((a, b) => {
          if (a.dictNote === specificValue) {
            return -1;
          } else if (b.dictNote === specificValue) {
            return 1;
          } else {
            return a.sortNum - b.sortNum;
          }
        });
      } else {
        return null;
      }
    }
  },
  created() {},
  methods: {
    //  关闭分享弹框
    closeCouponVisible() {
      this.serviceVisible = false;
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-drawer{
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  min-height: 800px;
  max-height: 1000px;
  ._header {
    text-align: center;
    padding: 36px 40px;
    ._title {
      font-size: 32px;
      color: #323233;
      padding-left: 80px;
    }
    .icon {
      width: 80px;
      height: 80px;
      text-align: right;
      float: right;
    }
  }
  ._scroll{
    min-height: 680px;max-height: 880px;
    ._content{
      padding: 30px 68px 80px 68px;
    }
    ._list{
      margin-bottom: 32px;
      ._title{
        position: relative;
        font-size: 28px;
        font-weight: bold;
        color: $uni-color-default;
      }
      ._title:before{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -16px;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background: $uni-color-default;
      }
      ._title:last-child{
        margin-bottom: 0;
      }
      ._text{
        margin-top: 8px;
        font-size: 28px;
        color: $uni-color-default;
      }
    }
  }
}
</style>
